<template>
	<view class="picker-view-box">
		<picker-view v-if="pickerReady" :value="newValue" class="picker-view" indicator-class="indicator_class" mask-class="mask_class"  :indicator-style="indicatorStyle" :mask-style="maskStyle" @change="bindChange">
			<picker-view-column v-for="(column, columnI) in pickerColumn" :key="column.key" class="picker-view-column">
				<view v-for="(item,index) in column.list" :key="index" class="picker_item" :class="{picker_selected: getValue(columnI) === index}" :style="column.style">
					{{ column.prefix || '' }}{{ item }}{{ column.suffix || '' }}
				</view>
			</picker-view-column>
		</picker-view>
		<view v-show="centerSymbol" class="center_symbol">
			<slot name="centerSymbol">
				<view :class="{picker_selected: centerSymbolEd}">
					{{ centerSymbol }}
				</view>
			</slot>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			/**
			 * pickerValue: [0,0], // model数据，用于取值
			 *
			 * pickerColumn: [ // 渲染列数据，正常是默认均分，有需要就改样式
			 * 	{
			 * 		prefix: '第', // 渲染前后的字符串
			 * 		sedPrefix: '时', // 设置为true时 只有picker_selected才渲染后面的字符串 这个功能放弃，以后有需要可以考虑加上
			 * 		suffix: '时', // 渲染前后的字符串
			 * 		sedSuffix: '时', // 设置为true时 只有picker_selected才渲染后面的字符串 这个功能放弃，以后有需要可以考虑加上
			 * 		key: 'a', // 请提供key，以免报错
			 * 		list: [] // 渲染的内部列表
			 * 	},
			 * ]
			 * centerSymbol: '', // 两列中间字符串，还想展示更多就用多个本组件来实现该效果
			 * centerSymbolEd: '', // 文案是否需要添加选中样式
			 */
			pickerValue: {
				type: Array,
				default: () => ([])
			},
			pickerColumn: {
				type: Array,
				default: () => ([])
			},
			indicatorStyle: {
				type: String,
				default: ''
			},
			maskStyle: {
				type: String,
				default: ''
			},
			centerSymbol: {
				type: String,
				default: ''
			},
			centerSymbolEd: {
				type: Boolean,
				default: false
			},
		},
		// computed: {
		// 	pickerReady(){
		// 		return !!(this.pickerColumn.length && this.pickerValue);
		// 	},
		// },
		watch: {
			pickerColumn: {
				handler(val) {
					console.log(val);
					if (val && val.length) {
						this.pickerReady = false; // 先关闭
						let time = 20;
						// #ifdef MP
						time = 100
						// #endif
						this.$nextTick(() => {
							setTimeout(() => {
								this.pickerReady = true; // 延迟显示 picker
							}, time); // 可调节延迟时间
						});
					}
				},
				deep: true,
				immediate: true
			},
			pickerValue: {
				handler(val) {
					// console.log(val);
					if (val && val.length) {
						this.$nextTick(() => {
							this.newValue = val;
						})
					}
				},
				deep: !0,
                immediate: !0,
			}
		},
		data() {
			return {
				newValue: [],
				pickerReady: false
			};
		},
		methods: {
		   bindChange(e) {
				// console.log(e);
				// this.pickerValue = e.detail.value;  // 更新选择下标值
				this.$emit("update:pickerValue", e.detail.value);
				this.$emit("bindChange", e.detail.value);
		   },
			getValue(index){
				return this.pickerValue[index];
			}
		},
	}
</script>

<style lang="less" scoped>
.picker-view-box {
	width: 100%;
	position: relative;

	.picker-view {
		width: 100%;
		height: 400rpx;
		.picker-view-column {
			width: 100%;
			height: 100%;
		}

		.picker_item {
			height: 80rpx;
			line-height: 28rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.center_symbol {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.picker_selected {
		color: #0FA291;  /* 设置选中项的文字颜色 */
		font-size: 32rpx;
		font-weight: bold;
		transform: scale(1.1);
	}

}
::v-deep {
	.indicator_class {
		height: 80rpx;
		background-image: linear-gradient(to right, rgba(245,247,249,0.1), rgba(194,242,237,0.5), rgba(245,247,249,0.1));
		z-index: 0;
		&::before,&::after {
			border: none;
		}
	}
	/* 考虑穿透迭代问题，将该样式放在权重最低层  注：微信小程序不支持直接使用maskClass  需要style */
	.mask_class {
		background-image: linear-gradient(rgba(245,247,249, 0.95), rgba(245,247,249, 0.6)), linear-gradient(0deg, rgba(245,247,249, 0.95), rgba(245,247,249, 0.6));
	}
}
</style>
